<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="status-bar"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="nav-title">奖励提现</view>
				<view class="nav-right">
					<text class="more-icon">⋯</text>
					<text class="dash-icon">—</text>
					<text class="target-icon">◎</text>
				</view>
			</view>
		</view>

		<!-- 提现功能区域 -->
		<view class="withdraw-section">
			<view class="withdraw-card">
				<!-- 提现至 -->
				<view class="withdraw-item">
					<view class="item-left">
						<text class="item-label">提现至</text>
					</view>
					<view class="item-right">
						<text class="check-icon">✓</text>
						<text class="withdraw-method">微信零钱</text>
					</view>
				</view>

				<!-- 提现金额 -->
				<view class="withdraw-item">
					<view class="item-left">
						<text class="item-label">提现金额</text>
						<text class="help-icon">?</text>
					</view>
					<view class="item-right" @click="goToWithdrawRecords">
						<text class="record-text">提现记录</text>
						<text class="arrow-icon">></text>
					</view>
				</view>

				<!-- 金额输入区域 -->
				<view class="amount-section">
					<text class="currency-symbol">¥</text>
					<input 
						class="amount-input" 
						type="number" 
						v-model="withdrawAmount"
						placeholder="0.00"
						@input="onAmountInput"
					/>
				</view>

				<!-- 提示信息 -->
				<view class="tip-section">
					<text class="tip-text">可提现奖励金额 ¥{{ availableAmount }}, </text>
					<text class="withdraw-all" @click="withdrawAll">全部提现</text>
				</view>

				<!-- 提现按钮 -->
				<view class="withdraw-btn" @click="handleWithdraw">
					<text class="btn-text">提现</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				withdrawAmount: '',
				availableAmount: 0,
				withdrawMethod: 'wechat'
			}
		},
		onLoad(options) {
			// 获取可提现金额
			this.getAvailableAmount()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			// 获取可提现金额
			async getAvailableAmount() {
				try {
					// 从上一个页面获取数据
					const pages = getCurrentPages()
					const prevPage = pages[pages.length - 2]
					if (prevPage && prevPage.data.rewardData) {
						this.availableAmount = prevPage.data.rewardData.currentAmount
					} else {
						// 如果没有获取到，使用默认值
						this.availableAmount = 11
					}
				} catch (error) {
					console.error('获取可提现金额失败:', error)
					this.availableAmount = 11
				}
			},
			
			// 金额输入处理
			onAmountInput(e) {
				const value = e.detail.value
				// 限制只能输入数字和小数点
				const filteredValue = value.replace(/[^\d.]/g, '')
				// 限制小数点后两位
				const parts = filteredValue.split('.')
				if (parts.length > 2) {
					this.withdrawAmount = parts[0] + '.' + parts[1]
				} else if (parts.length === 2 && parts[1].length > 2) {
					this.withdrawAmount = parts[0] + '.' + parts[1].substring(0, 2)
				} else {
					this.withdrawAmount = filteredValue
				}
			},
			
			// 全部提现
			withdrawAll() {
				this.withdrawAmount = this.availableAmount.toString()
			},
			
			// 跳转到提现记录
			goToWithdrawRecords() {
				uni.navigateTo({
					url: '/pages/myRewards/withdrawRecords'
				})
			},
			
			// 处理提现
			handleWithdraw() {
				// 验证提现金额
				if (!this.withdrawAmount || parseFloat(this.withdrawAmount) <= 0) {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					})
					return
				}
				
				const amount = parseFloat(this.withdrawAmount)
				if (amount > this.availableAmount) {
					uni.showToast({
						title: '提现金额不能超过可提现金额',
						icon: 'none'
					})
					return
				}
				
				// 确认提现
				uni.showModal({
					title: '提现确认',
					content: `确定要提现 ¥${amount} 到微信零钱吗？`,
					success: (res) => {
						if (res.confirm) {
							this.processWithdraw(amount)
						}
					}
				})
			},
			
			// 执行提现
			async processWithdraw(amount) {
				try {
					uni.showLoading({
						title: '提现中...'
					})
					
					// 这里调用提现API
					// await this.$api.withdraw({
					//   amount: amount,
					//   method: this.withdrawMethod
					// })
					
					// 模拟提现成功
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: '提现成功',
							icon: 'success'
						})
						
						// 返回上一页
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}, 2000)
					
				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: '提现失败',
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.container {
	background: #f5f5f5;
	min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	position: relative;
}

.status-bar {
	height: calc(var(--status-bar-height, 0) + 20rpx);
	background: transparent;
}

.nav-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
}

.nav-left, .nav-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.back-icon {
	font-size: 48rpx;
	color: white;
	font-weight: bold;
}

.nav-title {
	font-size: 36rpx;
	font-weight: 700;
	color: white;
}

.nav-right {
	gap: 15rpx;
}

.more-icon, .dash-icon, .target-icon {
	font-size: 32rpx;
	color: white;
}

/* 提现功能区域 */
.withdraw-section {
	margin: 30rpx;
}

.withdraw-card {
	background: white;
	border-radius: 20rpx;
	padding: 40rpx 35rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid #f0f0f0;
}

/* 提现项目 */
.withdraw-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.withdraw-item:last-of-type {
	border-bottom: none;
}

.item-left {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.item-label {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.help-icon {
	font-size: 24rpx;
	color: #999;
	background: #f5f5f5;
	border-radius: 50%;
	width: 32rpx;
	height: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-right {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.check-icon {
	font-size: 28rpx;
	color: #4CAF50;
	font-weight: bold;
}

.withdraw-method {
	font-size: 32rpx;
	color: #333;
}

.record-text {
	font-size: 28rpx;
	color: #666;
}

.arrow-icon {
	font-size: 24rpx;
	color: #999;
}

/* 金额输入区域 */
.amount-section {
	display: flex;
	align-items: center;
	padding: 40rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.currency-symbol {
	font-size: 60rpx;
	font-weight: 700;
	color: #333;
	margin-right: 20rpx;
}

.amount-input {
	flex: 1;
	font-size: 60rpx;
	font-weight: 700;
	color: #333;
	background: transparent;
	border: none;
	outline: none;
}

/* 提示信息 */
.tip-section {
	padding: 30rpx 0;
	display: flex;
	align-items: center;
}

.tip-text {
	font-size: 28rpx;
	color: #666;
}

.withdraw-all {
	font-size: 28rpx;
	color: #4CAF50;
	font-weight: 500;
}

/* 提现按钮 */
.withdraw-btn {
	background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
	border-radius: 25rpx;
	padding: 25rpx;
	margin-top: 40rpx;
	text-align: center;
	box-shadow: 0 4rpx 15rpx rgba(76, 175, 80, 0.3);
	transition: all 0.3s ease;
}

.withdraw-btn:active {
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.4);
}

.btn-text {
	font-size: 36rpx;
	font-weight: 600;
	color: white;
}
</style>